---
order: 5.91
category: '@threlte/extras'
title: <UvMaterial>
sourcePath: 'packages/extras/src/lib/components/UvMaterial/UvMaterial.svelte'
type: 'component'
componentSignature:
  {
    extends:
      {
        type: 'ShaderMaterial',
        url: 'https://threejs.org/docs/index.html#api/en/objects/ShaderMaterial'
      },
    props: [],
    exports: []
  }
---

A material that visualizes the uvs of a geometry. Uvs are typically used for texture indexing.

<Example path="extras/uv-material" />

## Usage

Simply import the component and add it as a child to a mesh

```svelte title="Scene.svelte"
<script>
  import { T } from '@threlte/core'
  import { UvMaterial } from '@threlte/extras'
</script>

<T.Mesh>
  <T.BoxGeometry />
  <UvMaterial />
</T.Mesh>
```

## Caveats

The geometry must have a "uv" attribute in order for this material to work. If you're creating your own geometry, be sure to assign the "uv" attribute.

```ts
const geometry = new BufferGeometry()
const uvAttribute = new BufferAttribute(/* uv array here */)
geometry.setAttribute('uv', uvAttribute)
```

Most models that you import into your program should come with uv data and three.js will automatically assign uv attributes when loading the model.
